<template>
    <div class="punchCardStatistics">
        <cjcNav title="打卡统计" @customRouter="customRouter" btn3="明细" @btn3click="btn3click"></cjcNav>
        <div class="top" v-if="$store.state.CountTime">
            <Row class="time-area" v-if="$store.state.SchoolWeekList">
                <Col span=10 offset=1>
                    <Select value="1" disabled>
                        <Option value="1">{{$store.state.SchoolWeekList[0].XN}} {{$store.state.SchoolWeekList[0].XQ}}学期</Option>
                    </Select>
                </Col>
                <Col span=10 offset=2>
                    <Select v-model="week">
                        <Option :value=0>所有周次</Option>
                        <Option :value="Number(item.ZC)" v-for="item in $store.state.SchoolWeekList" :key="item.ZC">第{{item.ZC}}周</Option>
                    </Select>
                </Col>
            </Row>
            <div class="statis">
                <circles :time="$store.state.CountTime.PRACTICAL_TIME"/>
            </div>
        </div>
        <div class="foot" v-if="$store.state.CountTime">
            <div class="header">您本学期/周</div>
            <div class="content">
                <div class="list">
                    共需打卡<span class="time">{{$store.state.CountTime.SHOULD_TIME}}</span>小时
                </div>
                <div class="list">
                    实际打卡<span class="time">{{$store.state.CountTime.PRACTICAL_TIME}}</span>小时
                </div>
                <div class="list">
                    还需打卡<span class="time">{{$store.state.CountTime.LAST_TIME }}</span>小时
                </div>
            </div>
        </div>
        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
export default {
    data() {
        return {
            week: 1,
            loading: false,
            firstLoading: true
        }
    },
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        circles: () => import('@/components/common/circle.vue')
    },
    watch: {
        week() {
            if (!this.firstLoading) {
                this.setCountTime()
            }
        }
    },
    methods: {
        btn3click() {
            // 跳入明细界面
            this.$router.push({
                name: 'recordetail',
                params: {
                    week: this.week
                }
            })
            sessionStorage.setItem('teaId', this.$store.state.userInfo.USER_ID)
            sessionStorage.setItem('manId', 2)
        },
        customRouter() {
            // 自定义路由
            this.$router.push({
                name: 'punchCard'
            })
        },
        /**
         * 设置教学周
        */
        async setSchoolWeekList() {
            let SchoolWeekList = await this.$store.dispatch('getSchoolWeekList')
            this.$store.commit('SET_SchoolWeekList', SchoolWeekList.result)
        },
        /**
         * 设置统计时间
        */
        async setCountTime() {
            this.loading = true
            let CountTime = await this.$store.dispatch('getCountTime', {
                userId: this.$store.state.userInfo.USER_ID,
                XN: this.$store.state.SchoolWeekList[0].XN,
                XQ: this.$store.state.SchoolWeekList[0].XQ,
                ZC: this.week
            })
            this.loading = false
            this.$store.commit('SET_CountTime', CountTime.result)
        },
        // 设置当前周
        async setSchoolWeek() {
            let SchoolWeek = await this.$store.dispatch('getSchoolWeek')
            this.$store.commit('SET_SchoolWeek', SchoolWeek.result)
            this.week = Number(this.$store.state.SchoolWeek.ZC)
        }
    },
    created() {
        const Vm = this
        Vm.loading = true
        async function step() {
            await Vm.setSchoolWeek()
            Vm.firstLoading = false
            await Vm.setSchoolWeekList()
            await Vm.setCountTime()
            Vm.loading = false
        }
        this.$store.dispatch('isUserInfo').then(res => {
            step()
        })
    }
}
</script>

<style lang="less">
    .punchCardStatistics {
        .top{
            height: 290px;
            overflow: hidden;
            background-color: #fff;
            .time-area{
                margin-top: 20px;
            }
            .statis{
                padding-top: 40px;
            }
        }
        .foot{
            margin-top: 10px;
            background-color: #fff;
            padding: 0 20px;
            .header{
                height: 40px;
                line-height: 40px;
                color: #8b8b8b;
                font-size: 14px;
                text-align: center;
                border-bottom: 1px solid #f8f8f8;
            }
            .content{
                font-size: 14px;
                padding: 0 0 20px 0;
                border-bottom: 1px solid #f8f8f8;
                .list{
                    padding: 10px 0 0 0;
                    text-align: center;
                    .time {
                        display: inline-block;
                        width: 60px;
                        // padding: 0 15px;
                        color: #2d8cf0;
                    }
                }
            }
            .bottom{
                padding: 20px 0;
                font-size: 14px;
                text-align: center;
                .text{
                    display: inline-block;
                    width: 35px; 
                    text-align: center;
                }
                .chidao{
                    .text;
                    background-color: #ed3f14;
                    color: #fff;
                }
                .zaodap{
                    .text;
                    background-color: #0093dd;
                    color: #fff;
                }
            }
        }
    }
</style>
